<div class="order">

  <div class="index-h">
    <h3 routerLink="/"><img style="margin-right: 1rem;width:1rem;" src="../../../assets/icons/back2.png"
        alt="">{{'order-Page.DZLC' | translate}}</h3>
    <div class="h-img-bg weui-flex">
      <span class="weui-flex__item">STEP 1 <p>{{'order-Page.TJXQ' | translate}}</p> </span>
      <span class="weui-flex__item">STEP 2 <p>{{'order-Page.ZFDJ' | translate}}</p></span>
      <span class="weui-flex__item">STEP 3 <p>{{'order-Page.KHGZXC' | translate}}</p></span>
    </div>
  </div>

  <div class="index-form">
    <h3>{{'order-Page.YYXX' | translate}}</h3>
    <form [formGroup]="orderForm">

      <div class="weui-cell weui-cell_vcode">
        <div class="weui-cell__hd"><label class="weui-label">{{'order-Page.HYNC' | translate}}</label></div>
        <div class="weui-cell__bd">
          <input disabled class="weui-input" type="text" placeholder="{{'registerPage.input-nickname' | translate}}"
            formControlName="loginId" name="loginId" />
        </div>
      </div>

      <div class="weui-cell weui-cell_vcode">
        <div class="weui-cell__hd"><label class="weui-label">{{'order-Page.LXFS' | translate}}</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="text" placeholder="{{'registerPage.input-nickname' | translate}}"
            formControlName="mobile" name="mobile" />
        </div>
        <div class="weui-cell__ft" *ngIf='!orderForm.controls.mobile.valid && orderForm.controls.mobile.dirty'><i
            style="width: 2rem;margin-left: 1rem;" class="weui-icon-warn"></i></div>
      </div>

      <div class="weui-cell weui-cell_vcode">
        <div class="weui-cell__hd"><label class="weui-label">{{'order-Page.FRLXFS' | translate}}</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="text" placeholder="{{'order-Page.FRLXFS-P' | translate}}"
            formControlName="contactWay" name="contactWay" />
        </div>
        <div class="weui-cell__ft" *ngIf='!orderForm.controls.contactWay.valid && orderForm.controls.contactWay.dirty'>
          <i style="width: 2rem;margin-left: 1rem;" class="weui-icon-warn"></i></div>
      </div>

      <div class="weui-cell weui-cell_vcode">
        <div class="weui-cell__hd"><label class="weui-label">{{'order-Page.YXDZ' | translate}}</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="text" placeholder="{{'order-Page.YXDZ' | translate}}" formControlName="email"
            name="email" />
        </div>
      </div>

      <div class="weui-cell weui-cell_vcode">
        <div class="weui-cell__hd"><label class="weui-label">{{'order-Page.YYRQ' | translate}}</label></div>
        <div class="weui-cell__bd">
          <!-- <weui-date-picker #datePicker placeholder="请选择日期" [min]="DT.min" [max]="DT.max" (show)='onshow(e)' formControlName="reserveDate" name="reserveDate">
          </weui-date-picker> -->
          <input style="background: none;border: none;direction: rtl;
          padding-right: 0;" placeholder="{{'order-Page.QXZRQ' | translate}}" type='date'
            formControlName="reserveDate" name="reserveDate" />
        </div>
        <div class="weui-cell__ft"
          *ngIf='!orderForm.controls.reserveDate.valid && orderForm.controls.reserveDate.dirty'><i
            style="width: 2rem;margin-left: 1rem;" class="weui-icon-warn"></i></div>
      </div>

      <div class="weui-cell weui-cell_vcode">
        <div class="weui-cell__hd"><label class="weui-label">{{'order-Page.RS' | translate}}</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="number" placeholder="{{'order-Page.RS' | translate}}"
            formControlName="peopleNum" name="peopleNum" />
        </div>
      </div>

      <div class="weui-cell weui-cell_vcode" *ngIf='isLXS'>
        <div class="weui-cell__hd"><label class="weui-label">{{'order-Page.LXS' | translate}}</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" disabled type="text" placeholder="{{'order-Page.LXS' | translate}}" formControlName="travel" name="travel" />
        </div>
      </div>

      <div class="weui-cell weui-cell_vcode weui-cell_select">
        <div class="weui-cell__hd"><label style="margin-left: 2rem;" class="weui-label">{{'order-Page.QWFW' | translate}}</label></div>
        <div class="weui-cell__bd">
          <input *ngIf='!isLXS' disabled class="weui-input" type="text" placeholder="{{'order-Page.DY' | translate}}" formControlName="guideName"
            name="guideName" />
          <select *ngIf='isLXS && !isGZ' class="weui-select" formControlName="guideId" name="guideId">
            <option *ngFor="let item of selData" value="{{item.id}}">{{item.name}}</option>
          </select>
          <select *ngIf='isLXS && isGZ' class="weui-select" formControlName="guideId" name="guideId">
            <option *ngFor="let item of selGzData" value="{{item.id}}">{{item.name}}</option>
          </select>
        </div>
      </div>
      <div class="my-checkbox" *ngIf='isLXS'>
        <span class="my-checkbox-lab">{{'order-Page.html8' | translate}}</span>
        <input style="width: 2rem;height: 2rem;" type="checkbox" [weui-checklist]="checkboxData" name="radio1" (click)='onChangeOnlyGZ()' />
      </div>



      <p class="form-label">{{'order-Page.BZ' | translate}}</p>
      <div class="weui-cell weui-cell_vcode">
        <div class="weui-cell__bd">
          <textarea class="form-textarea" placeholder="{{'order-Page.BZ-P' | translate}}" rows="3"
            formControlName="memo" name="memo" weui-cn="2" maxlength="500"></textarea>
        </div>
        <div class="weui-cell__ft" *ngIf='!orderForm.controls.memo.valid && orderForm.controls.memo.dirty'><i
            style="width: 2rem;margin-left: 1rem;" class="weui-icon-warn"></i></div>
      </div>





    </form>
  </div>

  <div class="del-pay-c">
    <div class="del-pay-text">
      <span>{{'AGENCY-Page.Appointment-Cost' | translate}}</span>
    </div>
    <div class="amount-text">￥<span class="pay-many">{{travel?.reservationFee}}</span></div>
    <a (click)='sub()' class="pay-btn">{{'order-Page.topay' | translate}}</a>
  </div>

</div>